<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          正在下载
        </h2>
      </div>
    </div>
  </div>
</div>
{% if DownloadCount > 0 %}
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
      {% for Torrent in Torrents %}
      <div class="col-lg-4">
        <div class="card card-link-pop">
          <div class="card-body">
            <div class="row align-items-center">
              {% if Torrent.image %}
              <div class="col-3">
                <img src="{{ Torrent.image }}" class="rounded">
              </div>
              {% endif %}
              <div class="col">
                <h3 class="card-title mb-1">
                  <a class="text-reset">{{ Torrent.title }}</a>
                </h3>
                <div class="text-muted" id="speed_text_{{ Torrent.id }}">
                  {{ Torrent.speed }}
                </div>
                <div class="mt-3">
                  <div class="row g-2 align-items-center">
                    <div class="col-auto" id="progress_text_{{ Torrent.id }}">
                      {{ Torrent.progress }}%
                    </div>
                    <div class="col">
                      <div class="progress progress-sm">
                        <div class="progress-bar" id="progress_{{ Torrent.id }}" style="width: {{ Torrent.progress }}%" role="progressbar" aria-valuenow="{{ Torrent.progress }}" aria-valuemin="0" aria-valuemax="100">
                          <span class="visually-hidden"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-auto">
                <div class="dropdown">
                  <a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="1" /><circle cx="12" cy="19" r="1" /><circle cx="12" cy="5" r="1" /></svg>
                  </a>
                  <div class="dropdown-menu dropdown-menu-end">
                    <a href="javascript:start_pt_download('{{ Torrent.id }}')" id="start_btn_{{ Torrent.id }}" class="dropdown-item" style="{% if Torrent.state == 'Downloading' %}display:none{% endif %}">开始</a>
                    <a href="javascript:stop_pt_download('{{ Torrent.id }}')" id="stop_btn_{{ Torrent.id }}" class="dropdown-item" style="{% if Torrent.state == 'Stoped' %}display:none{% endif %}">暂停</a>
                    <a href="javascript:remove_pt_download('{{ Torrent.id }}')" class="dropdown-item text-danger">删除</a>
                  </div>
                </div>
              </div>
              <input type="hidden" class="download_ids" id="id_{{ Torrent.id }}" value="{{ Torrent.id }}">
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% else %}
<div class="page-body">
  <div class="container-xl d-flex flex-column justify-content-center">
    <div class="empty">
      <div class="empty-img"><img src="./static/img/quitting_time.svg" height="128"  alt="">
      </div>
      <p class="empty-title">没有记录</p>
      <p class="empty-subtitle text-muted">
        当前没有正在下载的项目
      </p>
    </div>
  </div>
</div>
{% endif %}
<script type="text/javascript">
  // 下载控制
  function start_pt_download(id){
      var cmd = "pt_start";
      var param = {"id": id};
      ajax_post(cmd, param, function(ret){
        get_torrent_info(ret.id)
      });
  }
  function stop_pt_download(id){
      var cmd = "pt_stop";
      var param = {"id": id};
      ajax_post(cmd, param, function(ret){
        get_torrent_info(ret.id)
      });
  }
  function remove_pt_download(id){
      var cmd = "pt_remove";
      var param = {"id": id};
      ajax_post(cmd, param, function(ret){
        navmenu('downloading');
      });
  }

  //更新所有种子页面信息
  function get_all_torrents_info(){
      var cmd = "pt_info";
      var ids = [];
      var i = 0;
      $(".download_ids").each(function(){
        ids[i] = $(this).val();
        i++;
      });
      if(ids.length == 0){
        return;
      }
      var param = {"ids": ids};
      ajax_post(cmd, param, function(ret){
        if(ret.retcode == "0"){
          for (var i=0;i<ret.torrents.length;i++)
          {
            update_torrent_ui(ret.torrents[i]);
          }
          setTimeout("get_all_torrents_info()", 2000);
        }
      });
  }

  //更新一个种子页面信息
  function get_torrent_info(id){
    var cmd = "pt_info";
    var param = {"ids": id};
    ajax_post(cmd, param, function(ret){
      if(ret.retcode == "0"){
        for (var i=0;i<ret.torrents.length;i++)
        {
          update_torrent_ui(ret.torrents[i]);
        }
      }
    });
  }


  //更新单个种子的页面信息
  function update_torrent_ui(info){
      $("#speed_text_" + info.id).text(info.speed);
      $("#progress_text_" + info.id).text(info.progress + "%");
      $("#progress_" + info.id).attr("style", "width: " + info.progress + "%");
      $("#progress_" + info.id).attr("aria-valuenow", info.progress);
      if(info.state == "Stoped"){
        $("#start_btn_" + info.id).show()
        $("#stop_btn_" + info.id).hide()
      }else{
        $("#start_btn_" + info.id).hide()
        $("#stop_btn_" + info.id).show()
      }
  }

  //事件
  setTimeout("get_all_torrents_info()", 2000);

</script>